<template>
	<view class="userLayout pageBg">
		<custom-nav-bar :search="false"></custom-nav-bar>
		<view class="userInfo">
			<view class="avatar">
				<image :src="srcimg" mode="aspectFill"></image>
			</view>
			<view class="ip">wangyanhui</view>
			<view class="address">jsonp8888@163.com</view>
			
			<!-- <view class="weather">
				<view class="">
					温度:{{weather.temp+'--'+weather.text}}
				</view>
				<image class="icon" :src="`/static/icons/${weather.icon}.svg`" style="height: 40px;width: 40px;"></image>
			</view> -->
		</view>

		<view class="cardBg">
			<view class="list">
				<navigator url="/pages/productAdd/productAdd" class="row">
					<view class="left">
						<uni-icons type="download-filled" size="20"></uni-icons>
						<view class="text">产品管理</view>
					</view>
					<view class="right">
						<view class="text">{{productCount || '--'}}</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>
	<!-- 			<navigator url="/pages/deviceAdd/deviceAdd" class="row">
					<view class="left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<view class="text">设备管理</view>
					</view>
					<view class="right">
						<view class="text">{{deviceCount||'--'}}</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator> -->
				<navigator url="/pages/gatewayAdd/gatewayAdd" class="row">
					<view class="left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<view class="text">网关管理</view>
					</view>
					<view class="right">
						<view class="text">{{gatewaysCount||'--'}}</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>
			</view>
		</view>

		<view class="cardBg">
			<view class="list">
				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="clickContact">拨打电话</button>
					<!-- #endif -->
				</view>
				<view class="row">
					<view class="left">
						<uni-icons type="notification-filled" size="20"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

				<view class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cardBg">
			<view class="list">
				<!-- /pages/login/login -->
				<navigator url="/pages/dashboard/dashboard" class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">数据面板</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<navigator url="" class="row">
					<view class="left">
						<uni-icons type="notification-filled" size="20"></uni-icons>
						<view class="text">首页配置</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<view class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">参数配置</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		data() {
			return {
				srcimg: 'https://img1.baidu.com/it/u=2672705872,739783853&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
				productCount: '',
				gatewaysCount: '',
				deviceCount: '',
				weather:{},
			}
		},
		computed:{
		},
		components: {
			uniIcons
		},
		onReady() {
			this.getProductCount()
			this.getGatewayCount()
			this.getDeviceCount()
			// this.getWeather()
		},
		methods: {
			async getWeather() {
				const API_KEY = '772e2fb170e64febb119c74c71d65fd1';
				// 构造请求 URL  
				const url = `https://devapi.qweather.com/v7/weather/now?location=${101010100}&key=${API_KEY}`;
				// 发送请求  
				uni.request({
					url: url,
					success: (res) => {
						this.weather = res.data.now
						console.log('res~~~~~~~~~~~~~~~~~~',res);
					},
					fail: (err) => {
						// 请求失败的处理  
						console.error(err);
					}
				});
			},
			async getProductCount() {
				const db = uniCloud.database()
				const res = await db.collection('products').count()
				this.productCount = res.result.total
			},
			async getGatewayCount() {
				const db = uniCloud.database()
				const res = await db.collection('gateways').count()
				this.gatewaysCount = res.result.total
			},
			async getDeviceCount() {
				const db = uniCloud.database()
				const res = await db.collection('res').count()
				console.log('device', res);
				this.deviceCount = res.result.total
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		color: $brand-theme-color !important;
	}

	.userLayout {
		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 50rpx 0;
			.weather{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.icon{
					color: #0066cc;
					font-size: 28px;
					margin-left: 6px;
				}
			}
			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.cardBg {
			.list {
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					border-bottom: 1px solid #eee;
					position: relative;
					background: #fff;

					&:last-child {
						border-bottom: 0
					}

					.left {
						display: flex;
						align-items: center;

						.text {
							padding-left: 20rpx;
							color: #666
						}
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #aaa;

						}
					}

					button {
						position: absolute;
						top: 0;
						left: 0;
						height: 100rpx;
						width: 100%;
						opacity: 0;
					}
				}
			}
		}
	}
</style>